<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        canvas {
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <!-- 创建canvas -->
    <canvas id="oCanvas" width="500" height="400" ></canvas>
    <!-- 顶点着色器 -->
    <script type="notjs" id="vertex">
        attribute vec4 a_position;
        uniform mat4 u_matrix;
        void main() {
            // gl_Position = a_position;
            gl_Position = u_matrix * a_position;
            // gl_PointSize = 10.0;
        }
    </script>
    <script type="notjs" id="fragment">
        precision mediump float;
        void main() {
            gl_FragColor = vec4(0, 0, 0, 1.0);
        }

    </script>
    <script>
        var oCanvas = document.getElementById('oCanvas');
        // 获取webgl上下文对象
        var gl = oCanvas.getContext('webgl');
        if (!gl) {
            console.log('浏览器不支持webgl');
        }

        function createShader (gl, type, source) {
            var shader = gl.createShader(type);
            gl.shaderSource(shader, source);
            gl.compileShader(shader);
            var success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
            if (success) {
                return shader;
            }

            console.log(gl.getShaderInfoLog(shader));
            gl.deleteShader(shader);
        }
        var vertexStr = document.getElementById('vertex').innerText;
        var fragmentStr = document.getElementById('fragment').innerText;

        var vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexStr);
        var fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentStr);
        function createProgram(gl, vertexShader, fragmentShader) {
            var program = gl.createProgram();
            gl.attachShader(program, vertexShader);
            gl.attachShader(program, fragmentShader);
            gl.linkProgram(program);
            var success = gl.getProgramParameter(program, gl.LINK_STATUS);
            if (success) {
                return program;
            }
            console.log(gl.getProgramInfoLog(program))
        }
        var program = createProgram(gl, vertexShader, fragmentShader);
        var a_position = gl.getAttribLocation(program, 'a_position');
        var u_matrix = gl.getUniformLocation(program, 'u_matrix');
        var angle = 0.0;
        gl.useProgram(program);
        draw(0.0 * Math.PI / 180.0)
        function draw (deg) {
            var cosB = parseFloat(Math.cos(deg));
            var sinB = parseFloat(Math.sin(deg));
            console.log(cosB, sinB)
            // 旋转
            // var matrix = new Float32Array([
            //     cosB, sinB, 0.0, 0.0,
            //     -sinB, cosB, 0.0, 0.0,
            //     0.0, 0.0, 1.0, 0.0,
            //     0.0, 0.0, 0.0, 1.0
            // ]);
            // 平移
            var Tx = -0.0, Tz = 0.0, Ty = 0.0;
            var matrix = new Float32Array([
                1.0, 0.0, 0.0, 0.0,
                0.0, 1.0, 0.0, 0.0,
                0.0, 0.0, 1.0, 0.0,
                Tx, Ty, Tz, 1.0
            ])
            // 缩放
            // var Sx = 1.0, Sy = 2.0, Sz = 1.0;
            // var matrix = new Float32Array([
            //     Sx, 0.0, 0.0, 0.0,
            //     0.0, Sy, 0.0, 0.0,
            //     0.0, 0.0, Sz, 0.0,
            //     0.0, 0.0, 0.0, 1.0
            // ]);
            console.log(matrix)
            gl.uniformMatrix4fv(u_matrix, false, matrix);
            var pointBuffer = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER, pointBuffer);
            gl.enableVertexAttribArray(a_position);
            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
                0.0, 0.0,
                0.5, 0.0,
                0.0, 0.5
            ]), gl.STATIC_DRAW);
            
            gl.vertexAttribPointer(a_position, 2, gl.FLOAT, false, 0, 0);
            gl.drawArrays(gl.TRIANGLES, 0, 3);
        }
    
    </script>
</body>
</html>
